<template>
  <div class="ranking-page">
    <!-- 主要内容区域 -->
    <div class="ranking-content">
      <!-- 桌面端：左右布局 -->
      <div v-if="!isMobile" class="desktop-layout">
        <!-- 左侧菜单 -->
        <div class="ranking-sidebar">
          <ranking-menu :current-view="currentView" @menu-click="handleMenuClick" />
        </div>

        <!-- 右侧内容 -->
        <div class="ranking-main">
          <price-ranking v-if="currentView === 'price-ranking'" />
          <keycard-ranking v-else-if="currentView === 'keycard-ranking'" />
          <bullet-ranking v-else-if="currentView === 'bullet-ranking'" />
          <bullet-package-ranking v-else-if="currentView === 'bullet-package-ranking'" />
          <category-ranking v-else-if="currentView === 'category-ranking'" />
          <special-operation-ranking v-else-if="currentView === 'special-operation-ranking'" />

          <!-- 默认显示或其他视图的占位 -->
          <div v-else class="default-view">
            <n-empty description="请选择左侧菜单项查看内容">
              <template #icon>
                <n-icon :size="48" :depth="3">
                  <TrophyOutline />
                </n-icon>
              </template>
            </n-empty>
          </div>
        </div>
      </div>

      <!-- 移动端：简化布局 -->
      <div v-else class="mobile-layout">
        <!-- 移动端排行榜菜单选择器 -->
        <div class="mobile-menu-selector">
          <n-select
            v-model:value="currentView"
            :options="mobileMenuOptions"
            placeholder="选择排行榜类型"
            size="large"
            @update:value="handleMobileMenuChange"
          />
        </div>

        <!-- 移动端内容显示 -->
        <div class="mobile-content">
          <price-ranking v-if="currentView === 'price-ranking'" />
          <keycard-ranking v-else-if="currentView === 'keycard-ranking'" />
          <bullet-ranking v-else-if="currentView === 'bullet-ranking'" />
          <bullet-package-ranking v-else-if="currentView === 'bullet-package-ranking'" />
          <category-ranking v-else-if="currentView === 'category-ranking'" />
          <special-operation-ranking v-else-if="currentView === 'special-operation-ranking'" />

          <!-- 默认显示或其他视图的占位 -->
          <div v-else class="default-view">
            <n-empty description="请选择排行榜类型查看内容">
              <template #icon>
                <n-icon :size="48" :depth="3">
                  <TrophyOutline />
                </n-icon>
              </template>
            </n-empty>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { TrophyOutline } from '@vicons/ionicons5'
import RankingMenu from './components/RankingMenu.vue'
import PriceRanking from './views/PriceRanking.vue'
import KeycardRanking from './views/KeycardRanking.vue'
import BulletRanking from './views/BulletRanking.vue'
import BulletPackageRanking from './views/BulletPackageRanking.vue'
import CategoryRanking from './views/CategoryRanking.vue'
import SpecialOperationRanking from './views/SpecialOperationRanking.vue'


// 引入排行榜样式
import '@/styles/components/ranking/RankingPage.css'

// 路由相关
const route = useRoute()
const router = useRouter()

// 响应式状态
const isMobile = ref(false)

// 获取初始视图类型
const getInitialView = (): string => {
  // 1. 优先从URL查询参数获取
  const urlType = route.query.type as string
  if (urlType && ['price-ranking', 'keycard-ranking', 'category-ranking', 'special-operation-ranking'].includes(urlType)) {
    return urlType
  }

  // 2. 从localStorage获取
  const savedType = localStorage.getItem('ranking-current-view')
  if (savedType && ['price-ranking', 'keycard-ranking', 'category-ranking', 'special-operation-ranking'].includes(savedType)) {
    return savedType
  }

  // 3. 默认值
  return 'price-ranking'
}

const currentView = ref(getInitialView())

// 移动端菜单选项
const mobileMenuOptions = [
  {
    label: '价格排行榜',
    value: 'price-ranking'
  },
  {
    label: '钥匙卡排行榜',
    value: 'keycard-ranking'
  },
  {
    label: '子弹排行榜',
    value: 'bullet-ranking'
  },
  {
    label: '子弹卡包',
    value: 'bullet-package-ranking'
  },
  {
    label: '分类排行榜',
    value: 'category-ranking'
  },
  {
    label: '特勤处排行榜',
    value: 'special-operation-ranking'
  }
]

// 移动端检测
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 更新视图类型
const updateCurrentView = (viewType: string) => {
  currentView.value = viewType

  // 更新URL查询参数
  router.replace({
    query: { ...route.query, type: viewType }
  })

  // 保存到localStorage
  localStorage.setItem('ranking-current-view', viewType)
}

// 处理菜单点击
const handleMenuClick = (menuKey: string) => {
  updateCurrentView(menuKey)
}

// 处理移动端菜单变化
const handleMobileMenuChange = (value: string) => {
  updateCurrentView(value)
}

// 监听URL查询参数变化
watch(() => route.query.type, (newType) => {
  if (newType && typeof newType === 'string' &&
      ['price-ranking', 'keycard-ranking', 'category-ranking', 'special-operation-ranking'].includes(newType)) {
    currentView.value = newType
    localStorage.setItem('ranking-current-view', newType)
  }
})

// 生命周期
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)

  // 初始化时如果URL没有type参数，则添加当前视图到URL
  if (!route.query.type) {
    router.replace({
      query: { ...route.query, type: currentView.value }
    })
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.ranking-page {
  width: 100%;
  padding: 0 16px;
}

.ranking-content {
  min-height: 600px;
}

.desktop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

.ranking-sidebar {
  position: sticky;
  top: 100px;
  /* 菜单宽度已在grid-template-columns中限制为240px */
}

.ranking-main {
  min-height: 600px;
  /* 使用1fr自动填充剩余空间，无宽度限制 */
  width: 100%;
}

.mobile-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-menu-selector {
  margin-bottom: 16px;
}

.mobile-content {
  flex: 1;
}

.default-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-page {
    padding: 0 12px;
  }

  .page-header {
    margin-bottom: 16px;
    padding: 12px 0;
  }

  .desktop-layout {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-layout {
    display: none;
  }
}
</style>
